<template>
  <div class="consultation">
    <div class="consultation-block">
      <el-input placeholder="请输入编号" size="mini" v-model="filterKey" style="width: 150px;margin-right: 10px;"></el-input>
      <el-button type="primary" size="mini" @click="refreshTable()">编号查询</el-button>
      <div class="table" v-loading="tableLoading">
        <el-table size="mini" :data="tableData" style="width: 100%">
          <el-table-column prop="no" label="报销编号"> </el-table-column>
          <el-table-column prop="useName" label="用血者姓名"> </el-table-column>
          <el-table-column prop="createTime" label="报销提交日期"> </el-table-column>
          <el-table-column prop="status" label="是否核验"> </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="warning"
                size="mini"
                @click="openDialog(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    

    <el-dialog
      title="用户用血报销信息"
      :visible.sync="isVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <div class="flex-center" style="margin-top: 30px">
          <div>用血类型</div>
          <el-radio-group v-model="form.type" disabled>
            <el-radio :label="'本人用血'">本人用血</el-radio>
            <el-radio :label="'家属用血'">家属用血</el-radio>
          </el-radio-group>
        </div>
        <el-steps :active="active" style="margin-top: 30px">
          <el-step :title="item" v-for="item in steps"></el-step>
        </el-steps>
        <div class="form" style="height: 450px">
          <el-form
            v-if="steps[active - 1] === '献血者信息'"
            :model="form"
            label-width="160px"
            class="demo-ruleForm"
          >
            <el-form-item label="身份证正反面照片" prop="idCardPics">
              <div v-if="form.idCardPics.length" class="img-blocks">
                <div
                  style="position: relative; width: 160px"
                  v-for="(item, index) in form.idCardPics"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    :preview-src-list="[item]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="上传您的献血证照片" prop="bloodCardPic">
              <div v-if="form.bloodCardPic">
                <div style="position: relative; width: 160px">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="form.bloodCardPic"
                    :preview-src-list="[form.bloodCardPic]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="献血者姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="cardNo">
              <el-input v-model="form.cardNo"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            v-if="steps[active - 1] === '用血信息'"
            :model="form"
            label-width="160px"
            class="demo-ruleForm"
          >
            <el-form-item label="用血者姓名" prop="useName">
              <el-input v-model="form.useName"></el-input>
            </el-form-item>
            <el-form-item label="就诊医院" prop="useHospital">
              <el-input v-model="form.useHospital"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="useCardNo">
              <el-input v-model="form.useCardNo"></el-input>
            </el-form-item>
            <el-form-item label="住院号" prop="useZYH">
              <el-input v-model="form.useZYH"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="usePhone">
              <el-input v-model="form.usePhone"></el-input>
            </el-form-item>
            <el-form-item label="医院位置" prop="hospitalLocation">
              <el-input v-model="form.hospitalLocation"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            v-if="steps[active - 1] === '用血报销证明'"
            :model="form"
            label-width="200px"
            class="demo-ruleForm"
          >
            <el-form-item label="发票编号" prop="useName">
              <el-input v-model="form.invoice"></el-input>
            </el-form-item>
            <el-form-item label="请上传用血发票照片" prop="invoicePic">
              <div v-if="form.invoicePic">
                <div style="position: relative; width: 160px">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="form.invoicePic"
                    :preview-src-list="[form.invoicePic]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="请上传输血记录单" prop="invoiceRecord">
              <div v-if="form.invoiceRecord">
                <div style="position: relative; width: 160px">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="form.invoiceRecord"
                    :preview-src-list="[form.invoiceRecord]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="请上传医保，新农合结算票" prop="yibao">
              <div v-if="form.yibao">
                <div style="position: relative; width: 160px">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="form.yibao"
                    :preview-src-list="[form.yibao]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="请上传出院记录" prop="outRecord">
              <div v-if="form.outRecord">
                <div style="position: relative; width: 160px">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="form.outRecord"
                    :preview-src-list="[form.outRecord]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <el-form
            v-if="steps[active - 1] === '银行卡信息'"
            :model="form"
            label-width="160px"
            class="demo-ruleForm"
          >
            <el-form-item label="银行卡正反面照片" prop="bankCardPics">
              <div v-if="form.bankCardPics.length" class="img-blocks">
                <div
                  style="position: relative; width: 160px"
                  v-for="(item, index) in form.bankCardPics"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    :preview-src-list="[item]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="借记卡卡号" prop="bankCardNo">
              <el-input v-model="form.bankCardNo"></el-input>
            </el-form-item>
            <el-form-item label="开户人姓名" prop="bankCardUserName">
              <el-input v-model="form.bankCardUserName"></el-input>
            </el-form-item>
            <el-form-item label="开户行名称号" prop="bankCardNameno">
              <el-input v-model="form.bankCardNameno"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="bankPhone">
              <el-input v-model="form.bankPhone"></el-input>
            </el-form-item>
            <el-form-item label="银行支行" prop="bankName">
              <el-input v-model="form.bankName"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            v-if="steps[active - 1] === '亲属关系证明'"
            :model="form"
            label-width="220px"
            class="demo-ruleForm"
          >
            <el-form-item label="与献血者关系" prop="relationship">
              <el-select v-model="form.relationship" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="结婚证/户口本/单位，社区，派出所等关系证明"
              prop="relationshipPics"
            >
              <div v-if="form.relationshipPics.length" class="img-blocks">
                <div
                  style="position: relative; width: 160px"
                  v-for="(item, index) in form.relationshipPics"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item"
                    :preview-src-list="[item]"
                  >
                  </el-image>
                </div>
              </div>
            </el-form-item>
          </el-form>
          <el-form
            v-if="steps[active - 1] === '核验成功'"
            :model="form"
            ref="form"
            :rules="rules"
            label-width="220px"
            class="demo-ruleForm"
          >
            <el-form-item label="报销编号" prop="relationship">
              {{ form.no }}
            </el-form-item>
            <el-form-item label="核验人姓名" prop="hyrName">
              <el-input v-model="form.hyrName"></el-input>
            </el-form-item>
            <el-form-item label="核验人手机号" prop="hyrPhone">
              <el-input v-model="form.hyrPhone"></el-input>
            </el-form-item>
            <el-form-item label="用血者开户人姓名" prop="relationship">
              {{ form.bankCardUserName }}
            </el-form-item>
            <el-form-item label="手机号" prop="relationship">
              {{ form.bankPhone }}
            </el-form-item>
            <el-form-item label="用户支出卡号" prop="relationship">
              {{ form.bankCardNo }}
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btns" style="position: relative; z-index: 99;">
          <el-button
            v-if="active > 1"
            size="mini"
            type="primary"
            @click="active--"
            >上一步</el-button
          >
          <el-button
            v-if="active < steps.length"
            size="mini"
            type="primary"
            @click="active++"
            >下一步</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisible = false">取 消</el-button>
        <el-button type="primary" @click="isVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import { getExpense } from "../service.js";
export default {
  name: "home",
  mounted() {
    this.refreshTable();
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      filterKey: '',
      isInsert: false,
      pageSize: 10,
      isVisible: false,
      steps: [],
      active: 1,
      steps1: [
        "献血者信息",
        "用血信息",
        "用血报销证明",
        "银行卡信息",
      ],
      options: ["父母", "配偶", "子女", "兄弟姐妹", "配偶父母"],
      steps2: [
        "献血者信息",
        "用血信息",
        "用血报销证明",
        "亲属关系证明",
        "银行卡信息",
      ],
      form: {
        remark: ''
      },
      total: 0,
      tableLoading: false,
    };
  },
  methods: {
    handleCurrentChange(index) {
      this.currentPage = index
      this.refreshTable()
    },
    refreshTable() {
      getExpense({
        page: this.currentPage,
        pageSize: this.pageSize,
        no: this.filterKey
      }).then((res) => {
        this.tableData = res.code === 200 ? res.data.data : [];
        this.total = res.data.total
      });
    },
    
    openDialog(row) {
      let linshi = JSON.parse(JSON.stringify(row))
      this.form = {
        ...linshi,
        remark: linshi.remark || ''
      };
      this.form.idCardPics = JSON.parse(this.form.idCardPics);
      this.form.bankCardPics = JSON.parse(this.form.bankCardPics);
      if (this.form.type === "本人用血") {
        this.steps = this.steps1;
      } else {
        this.steps = this.steps2;
        this.form.relationshipPics = JSON.parse(this.form.relationshipPics);
      }
      if (row.status === '已核验' || row.status === '已报销') {
        this.steps.push('核验成功')
      }
      this.active = 1;
      this.isVisible = true;
    },
  },
};
</script>

<style scoped>
h2 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.consultation-block {
  width: 90%;
  margin-left: 5%;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px dashed gray;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
.img-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.el-icon-circle-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  color: red;
}
.flex-center {
  display: flex;
  align-items: center;
  margin-top: 10px;
  gap: 20px;
}
.btns {
  width: 20%;
  margin: 20px 40%;
}
</style>
